<template>
  <div>
      <p>欢迎光临_vue开发的收银系统_水果店</p>
    <table>
      <tr>
        <td>苹果10&ten;/斤，折扣<8折></td>
      </tr>
      <tr>
        <td>请输入你要买的斤数<input v-model="count" type="number" value=""></td>
      </tr>
      <tr>
        <td>
          <button @click="click">结账买单~</button>
        </td>
      </tr>
      <tr>
        <td>结账单：总价格：{{price}}&emsp;元 折后价：{{newPrice}}&emsp;元 省了：{{province}}&emsp;元</td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  name: "VuecliWorkFruitstore",

  data() {
    return {
      count: 0,
      price: 0,
      newPrice: 0,
      province: 0,
    };
  },

  methods: {
    click() {
      this.price = this.count * 10;
      this.newPrice = this.price * 0.8;
      this.province = this.price - this.newPrice;
    },
  },
};
</script>

<style scoped>
table {
  text-align: center;
}

table tr:nth-child(2) {
  font-weight: 700;
}

table td {
  width: 100vw;
  border: 1px solid #000;
}
</style>